// 导入 react 依赖包
import React, { Component } from 'react';
import ReactDOM from 'react-dom/client';

// 1 创建挂载点
const root = ReactDOM.createRoot(document.getElementById('root'));

class App extends React.Component {
  // 1 定义到构造函数中
  constructor() {
    super();
    this.state = {
      count: 0,
    };
    // 使用bind方法绑定this，返回一个新的绑定好this的函数，赋值给当前实例
    this.handleClick2 = this.handleClick2.bind(this);
  }

  // 2 类的公有字段
  // state = {
  //   count: 10,
  // };
  // 事件处理函数
  handleClick2(e) {
    console.log('handleClick', this);
    this.setState({ count: this.state.count + 1 });
  }

  // 现在推荐的写法
  handleClick = (e) => {
    console.log('handleClick', this);
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    // 这里的 this 是我们的 渲染的组件实例的this
    console.log(this);
    return (
      <div>
        <h1>{this.state.count}</h1>
        {/* 箭头函数绑定this的写法 */}
        {/* <button onClick={() => this.handleClick()}>+1</button> */}
        {/* 使用bind 绑定this */}
        {/* <button onClick={this.handleClick2}>+1</button> */}
        {/* 使用类的公有字段方式 */}
        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }
}

// 渲染的时候，一定要大些字母开头，以此来区分 React 自定义组件和 html 原生标签
root.render(<App />);
